vue中使用高德地图

#vue中使用高德地图| 来源: 网络整理| 查看: 265

VUE 项目中使用高德地图 1. vue项目中使用 AMap1.1 引入 AMap1.2 配置 webpack1.3 在项目中使用1.4 资源 2. vue中使用 vue-amap2.1 引入 vue-amap2.2 资源 3. vue中使用 AMap （2022年）3.1 加载loader3.2 使用3.3 DistrictSearch 的使用 4. 海量点 - MassMarks5. 注意事项1.高德地图中div的id只能使用"container"2. 一个页面只能使用一个component 6. 高德地图多个版本的问题

1. vue项目中使用 AMap 1.1 引入 AMap

在 public/index.html 文件 < /body > 前引入

1.2 配置 webpack

项目根目录新建配置文件 vue.config.js，填入内容

module.exports = { configureWebpack: { externals: { AMap: "window.AMap" } } }; 1.3 在项目中使用

新建 Index.vue 文件，填入内容

// eslint-disable-next-line import AMap from "AMap"; export default { name: "Index", data() { return {}; }, mounted() { new AMap.Map("container", { resizeEnable: true, zoom: 11 }); } }; 1.4 资源 AMap准备 - 入门教程Vue 引入 AMap 高德地图 2. vue中使用 vue-amap

vue-amap是一套基于Vue 2.0和高德地图的地图组件。官方文档已经写的很清楚了，就不再这里详述了

2.1 引入 vue-amap npm install vue-amap --save 2.2 资源 vue-amap 官方文档 3. vue中使用 AMap （2022年） 3.1 加载loader npm i @amap/amap-jsapi-loader --save 3.2 使用 import AMapLoader from '@amap/amap-jsapi-loader'; // 使用之前先 - 设置安全密钥 window._AMapSecurityConfig = { securityJsCode:'「您申请的安全密钥」', } // load 加载 AMapLoader.load({ "key": "", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 "AMapUI": { // 是否加载 AMapUI，缺省不加载 "version": '1.1', // AMapUI 版本 "plugins":['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件 }, "Loca":{ // 是否加载 Loca，缺省不加载 "version": '2.0' // Loca 版本 }, }).then((AMap)=>{ var map = new AMap.Map('container'); new AMapUI.SimpleMarker({}); }).catch(e => { console.log(e); }) 3.3 DistrictSearch 的使用

使用方式

AMap.plugin('AMap.DistrictSearch', function () { var districtSearch = new AMap.DistrictSearch({ // 关键字对应的行政区级别，country表示国家 level: 'country', // 显示下级行政区级数，1表示返回下一级行政区 subdistrict: 1, // 是否显示完整的行政区边界坐标默认base-不显示 extensions: 'all', }) // 搜索所有省/直辖市信息 districtSearch.search('中国', function(status, result) { // 查询成功时，result即为对应的行政区信息 }) })

注意：在使用 search() 方法获取行政区划（比如重庆市的奉节县或者九龙坡区）的时候，返回的行政区划的边界的坐标集合，有的会返回一个多个数组，这会导致在使用这些坐标绘制区域多边形的时候无法填充颜色，只需要array.slice(-1) 取最后一个数组就可以了。具体原因不知。如有知道，希望提点一下

4. 海量点 - MassMarks

问题1：数据很多时（大于1800）时，地图很卡解决办法：不要把map和vue绑定，放在window中，即window.map 问题2：数据很多时（大于1800）时，鼠标事件失效解决办法：官网示例没有这个问题，把vue中data中的数据做一次深拷贝，再使用，下面代码中有解释显示与隐藏 massMarks.show() massMarks.hide()

//绘制海量点 drawPoints (map){ let styleObject = { url: 'https://webapi.amap.com/images/mass/mass0.png', anchor: new AMap.Pixel(6, 6), size: new AMap.Size(22, 22), zIndex: 3, } // 下面这行代码如果没有，就会造成大量数据的时候，鼠标事件失效，具体原因未明 let data = JSON.parse(JSON.stringify(this.allMonitorList)) let massMarks = new AMap.MassMarks(data, { style: styleObject }) let marker = new AMap.Marker({content: ' ', offset : [20, 20], map}) massMarks.on('mouseover', function (e) { marker.setPosition(e.data.lnglat) marker.setLabel({content: e.data.name}) }) massMarks.on('mouseout', function(){ marker.setLabel({content: ''}) }) massMarks.setMap(map) }, 5. 注意事项 1.高德地图中div的id只能使用"container" 2. 一个页面只能使用一个component

一个页面内只能使用一个高德地图的component,不然会默认找到第一个container的div，第二个就没有作用，就会报错

// 示例 page-person-manage 和 page-attendance-log 都需要用到地图组件（the-person-track），不能把地图组件分别放在page-person-manage 和 page-attendance-log组件，只能放在最外层 6. 高德地图多个版本的问题

在加载地图前做一次地图的清理，就不会造成报错（不能加载多个版本）

// 高德地图涉及加载多个版本，加载前先清除 AMapLoader.reset() // load加载 AMapLoader.load({ // 申请好的Web断开发者key,首次调用load时必填 'key': '56aa1975bb4b9bfa484c715e24629e97', 'version': '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15, 1.4.15版本mark.setPosition()有bug 'plugins': ['AMap.Scale', 'AMap.MassMarks'], // 需要使用的插件 'AMapUI': { 'version': '1.1', 'plugins': [], }, }).then((AMap) => { // ...... })

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章